<template>
	<view class="page-container">

		<view class="box-price">
			<view class="box-price-inner">
				<view class="box-price-title">金额</view>
				<view class="box-price-text"><span style="font-size: 20rpx;">￥</span>{{sumPrice}}</view>
			</view>
		</view>

		<view class="order_payment">
			<uv-radio-group v-model="payment" :borderBottom="false" placement="column" iconPlacement="right" size="20">
				<uv-cell v-for="(item, index) in paymentList" :key="index" :border="false">
					<template v-slot:title>
						<uv-radio :name="item.value" activeColor="#08C053" labelColor="#333333" labelSize="15"
							iconSize="14">
							<template v-slot:default>
								<uv-icon slot="icon" :name="item.name" :size="24" :label="item.value" labelSize="16"
									space="8" />
							</template>
						</uv-radio>
					</template>
				</uv-cell>
			</uv-radio-group>
		</view>

		<view class="box-container-button">
			<uv-button size="large" color="linear-gradient(to bottom, #167fff, #4b8aff)"
				customStyle="color:#ffffff;fontWeight:500;fontSize:16px" @click="submit">确定支付</uv-button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				payment: '微信支付',
				paymentList: [{
					value: '微信支付',
					disabled: false,
					name: '/static/images/weixin.png',
				}, {
					value: '支付宝支付',
					disabled: false,
					name: '/static/images/zhifubao.png',
				}, {
					value: '银行卡支付',
					disabled: false,
					name: '/static/images/cardpay.png',
				}],
				order: []
			}
		},
		computed: {
			...mapGetters(["sumPrice", "selectedGoodsList", "address", "orderList"])
		},
		onLoad(options) {
			// Decode the order from the URL parameters
			if (options.order) {
				this.order = JSON.parse(decodeURIComponent(options.order));
			}
			console.log('订单信息:', this.order);
		},
		methods: {
		  submit() {
		    console.log('this.order', this.order);
		
		    let updatedOrderList = [];
		
		    // 判断 this.order 是数组还是对象
		    if (Array.isArray(this.order)) {
		      updatedOrderList = this.orderList.map(item => {
		        // 遍历 this.order 数组，检查每个订单对象的 orderID
		        const updatedOrder = this.order.find(order => order.orderID === item.orderID);
		
		        if (updatedOrder) {
		          return {
		            ...item,
		            orderStatus: 1, // 更新 status
		          };
		        }
		        return item;
		      });
		    } else {
		      // 如果 this.order 是对象
		      const updatedOrder = this.orderList.find(item => item.orderID === this.order.orderID);
		      
		      if (updatedOrder) {
		        updatedOrder.orderStatus = 1; // 更新 status
		        updatedOrderList = [updatedOrder];
		      }
		    }
		
		    console.log('Updated order list:', updatedOrderList); // 打印更新后的订单列表
		
		    this.$store.dispatch('updateOrderList', updatedOrderList); // 提交更新后的订单列表
		
		    // 立即查看 vuex 状态是否被更新
		    console.log('Store order list after dispatch:', this.$store.state.orderList);
		
		    uni.navigateTo({
		      url: '/pages/takeaway/orderList'
		    });
		  }
		}

	}
</script>

<style scoped lang="scss">
	.page-container {
		position: relative;
		background-color: #f6f6f6;

		.box-price {
			text-align: center;
			padding: 48px 0;
			background-color: #177fff;
			color: #ffffff;

			.box-price-text {
				padding-top: 20rpx;
				font-size: 60rpx;
				color: #ffffff;
			}
		}

		.order_payment {
			padding: 36rpx 0;

		}

		.box-container-button {
			margin: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}
	}
</style>